<template>
	<view class="u-page">
		<!-- 号卡爆品 -->
		<view class="shop_home_container">
			<view class="" v-if="currentTabbar == 0">
				<!-- top -->
				<view class="top_img_box">
					<image :src="shopBanner" mode="widthFix" class="top_img"></image>
				</view>

				<!-- middle -->
				<view class="shop_middle_box">
					<view class="middle_title">爆款套餐</view>
					<view class="middle_tab">
						<!-- <u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="changeTab"></u-tabs> -->
						<view
							class="middle_all"
							v-for="(item, index) in tabList"
							:key="item.id"
							:class="[tabCurrent == item.id ? 'middle_all_active' : '']"
							@click="changeTab(item, index)"
						>
							<view class="">
								{{ item.name }}
							</view>
							<view class="middle_line"></view>
						</view>
					</view>
				</view>

				<!-- 筛选 -->
				<view class="package_query_box">
					<view class="package_query_all" @click="handleBelong">
						<view class="package_query_name">
							{{ packageQueryObj.belongPlace ? packageQueryObj.belongPlace : '归属地' }}
						</view>
						<view class="package_query_img">
							<image src="/static/home/icon-arrow-down.png" mode="" class="query_img"></image>
						</view>
						<view class="">
							<u-select v-model="showBelongingPlace" :list="belongingPlaceList" @confirm="confirmBelonging" @cancel="cancelBelonging"></u-select>
						</view>
					</view>

					<view class="package_query_all" @click="handleTraffic">
						<view class="package_query_name">
							{{ packageQueryObj.trafficLimit ? packageQueryObj.trafficLimit : '流量额度' }}
							<span v-if="packageQueryObj.trafficLimit !== ''">G</span>
						</view>
						<view class="package_query_img">
							<image src="/static/home/icon-arrow-down.png" mode="" class="query_img"></image>
						</view>
						<view class="">
							<u-select v-model="showTrafficLimit" :list="trafficLimitList" @confirm="confirmTrafficLimit" @cancel="cancelTrafficLimit"></u-select>
						</view>
					</view>

					<view class="package_query_all" @click="handleCallDuration">
						<view class="package_query_name">
							{{ packageQueryObj.callDuration ? packageQueryObj.callDuration : '通话时长' }}
						</view>
						<view class="package_query_img">
							<image src="/static/home/icon-arrow-down.png" mode="" class="query_img"></image>
						</view>
						<view class="">
							<u-select v-model="showCallDuration" :list="callDurationList" @confirm="confirmCallDuration" @cancel="cancelCallDuration"></u-select>
						</view>
					</view>

					<view class="package_query_all" @click="handleClassify">
						<view class="package_query_name">
							{{ packageQueryObj.screen }}
						</view>
						<view class="package_query_img" style="width: 28rpx; height: 26rpx">
							<image src="/static/home/icon-screen.png" mode="" class="query_img"></image>
						</view>
					</view>
				</view>

				<!-- 套餐详情 -->
				<view class="home_package_box" v-for="(item, index) in packageList" :key="item.id">
					<view class="home_package_all">
						<!-- top -->
						<view class="package_top_box">
							<view class="package_top_title">{{ item.name }}{{ item.mini_text }}</view>
							<!-- <view class="package_top_check">
								详情 >
							</view> -->
						</view>

						<!-- middle -->
						<view class="package_middle_box" @click="handleShowAge(item, index)">
							<view class="package_middle_img_box">
								<image :src="item.cover_img" mode="" class="package_middle_img"></image>
							</view>

							<view class="package_middle_con_box">
								<view class="package_middle_tip_box">
									<view class="package_middle_tip_one">首月费用按天折算</view>
									<!-- <view class="package_middle_tip_two">
										佣金秒返
									</view> -->
									<view class="package_middle_tip_three">免费上门</view>
									<view class="package_middle_tip_four">官方对接</view>
									<view class="package_middle_tip_five">大流量卡</view>
								</view>

								<view class="package_middle_introduce_all">
									<view class="package_middle_introduce_box">
										<view class="package_middle_introduce_num">115G</view>
										<view class="package_middle_introduce_title">通用流量</view>
									</view>

									<view class="package_middle_introduce_line"></view>

									<view class="package_middle_introduce_box">
										<view class="package_middle_introduce_num">30G</view>
										<view class="package_middle_introduce_title">定向流量</view>
									</view>

									<view class="package_middle_introduce_line"></view>

									<view class="package_middle_introduce_box">
										<view class="package_middle_introduce_num">115G</view>
										<view class="package_middle_introduce_title">通话时长</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 亮点-按钮 -->
						<view class="package_bright_box">
							<view class="package_bright_title">产品亮点: {{ item.bright ? item.bright : '暂无' }}</view>
							<view class="package_handle_btn" @click="handlerTransact(item)">立即办理</view>
						</view>
					</view>

					<view class="home_package_other" v-if="isShowAge == index + 1">
						<!-- <view class="handle_age_box">
							<view class="age_icon_box">
								<image src="/static/home/icon-commission.png" mode="" class="age_icon"></image>
							</view>

							<view class="age_title">
								佣金政策：{{item.yjzc}}
							</view>
						</view> -->
						<view class="handle_age_box">
							<view class="age_icon_box">
								<image :src="cardIcon" mode="" class="age_icon"></image>
							</view>
							<view class="age_title">办理年龄: {{ item.min_age }}-{{ item.max_age }}岁</view>
						</view>

						<view class="handle_age_box">
							<view class="age_icon_box">
								<image :src="addressIcon" mode="" class="age_icon"></image>
							</view>
							<view class="age_title" v-if="item.noly_delivery_area">只发货地址: {{ item.noly_delivery_area }}</view>
							<view class="age_title" v-else>不发货地址: {{ item.sensitive_areas }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单查询 -->
			<view class="shop_home_query_box" v-else>
				<image :src="queryOrderBgi" mode="" class="query_img"></image>
				<view class="query_box">
					<view class="query_search_box">
						<view class="search_img_box">
							<image :src="searchImg" mode="" class="search_img"></image>
						</view>
						<view class="search_title">订单查询</view>
					</view>

					<view class="search_input_box">
						<u-input v-model="searchValue" :border="false" :clearable="false" maxlength="11" placeholder="请输入收货人手机号" />
					</view>

					<view class="search_btn" @click="handlerQuery">查询</view>
				</view>
			</view>

			<!-- 套餐分类弹窗 -->
			<u-popup v-model="showClassify" mode="right" border-radius="12" :closeable="true" close-icon-color="#000">
				<view class="classify_popup_box">
					<view class="classify_popup_title">查询条件</view>
					<!-- <view class="classify_title">
						可否选号
					</view>
					<view class="select_box">
						<u-input v-model="formClassify.is_choose_number" type="select" :border="false"
							@click="isChooseNumber = true" placeholder="请选择可否选号" />
						<u-select v-model="isChooseNumber" :list="selectNumberList"
							@confirm="confirmChooseNumber"></u-select>
					</view> -->

					<view class="classify_title">首充金额</view>
					<view class="">
						<view class="select_box">
							<u-input v-model="packageQueryObj.firstRechargeAmount" type="select" :border="false" placeholder="请选择首充金额" @click="handleChooseFirstRecharge" />
							<u-select v-model="showFirstRecharge" :list="firstRechargeList" @confirm="confirmFirstRecharge"></u-select>
						</view>
					</view>

					<view class="classify_title">月租</view>
					<view class="">
						<view class="select_box">
							<u-input v-model="packageQueryObj.monthlyRent" type="select" :border="false" placeholder="请选择月租" @click="handleChooseMonth" />
							<u-select v-model="showMonthlyRent" :list="monthlyRentList" @confirm="confirmMonthlyRent"></u-select>
						</view>
					</view>

					<view class="classify_btn_box">
						<view class="classify_reset_btn" @click="handleRefresh">
							重置
							<!-- <u-button type="warning" @click="handleRefresh">重置</u-button> -->
						</view>
						<view class="classify_sure_btn" @click="handleSureClassify">
							确定
							<!-- <u-button type="primary" @click="handleSureClassify">确定</u-button> -->
						</view>
					</view>
				</view>
			</u-popup>

			<!-- tabbar -->
			<u-tabbar v-model="currentTabbar" :list="tabbarList" :mid-button="false" active-color="#4E8BFE" inactive-color="#999999" @change="handlerChange"></u-tabbar>
		</view>
	</view>
</template>

<script>
import parseQueryString from '@/utils/interceptUrl.js';
import imageUrl from '@/utils/imgUrl.js';
import provinceList from '@/utils/province.js';
export default {
	data() {
		return {
			shopTitle: '172号号卡店铺', // 店铺名字
			// 评价数组
			evaluateDataList: [
				{
					score: '4.99',
					title: '商品体验'
				},
				{
					score: '4.99',
					title: '商品体验'
				},
				{
					score: '4.99',
					title: '商品体验'
				}
			],
			tabList: [
				{
					id: 0,
					name: '全部'
				},
				{
					id: 1,
					name: '电信'
				},
				{
					id: 3,
					name: '联通'
				},
				{
					id: 2,
					name: '移动'
				}
			],
			tabCurrent: 0,
			tabCurrents: 0,
			packageList: [],
			searchValue: '',
			showEdit: false,
			editNameValue: '',
			action: 'https://hk.saler.hkwl6688.com/api/user/uploadAvatar',
			uploadImgUrl: '', // 上传图片url
			fileListNew: [],
			personMsgObj: {},
			defaultAvatar: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836e814b6c5_1719889537.jpg',
			token: uni.getStorageSync('token'),
			isShowPromotion: false, // 是否显示一键推广按钮
			userInfo: {},
			imgUploadUrl: '',
			imgPackageUrl: '',
			promotionImg: '',
			showPopup: false,
			userSahreId: '',
			showBelongingPlace: false,
			isChooseNumber: false,
			formClassify: {
				belonging_place: '',
				data_quota: 0,
				call_duration: 0,
				is_choose_number: '',
				first_recharge_amount: 0,
				monthly_rent: 0
			},
			selectNumberList: [
				{
					value: '0',
					label: '不选号'
				},
				{
					value: '1',
					label: '选号'
				}
			],
			agentId: '',
			fxuserId: '',
			packageId: '',
			level: '',
			isShowAge: null,
			agentProId: '',
			tabCurrent: 0,
			tabCurrents: 0,
			currentTabbar: 0,
			packageList: [],
			tabbarList: [
				{
					iconPath: '/static/tabBarShop/icon-home-no.png',
					selectedIconPath: '/static/tabBarShop/icon-home-select.png',
					text: '号卡爆品',
					customIcon: false
				},
				{
					iconPath: '/static/tabBarShop/icon-query-no.png',
					selectedIconPath: '/static/tabBarShop/icon-query-select.png',
					text: '订单查询',
					customIcon: false
				}
			],
			queryOrderBgi: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2bc4581a8_1711156164.jpg',
			shopBanner: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe32f26074f_1711158002.jpg',

			sceneNumber: '',
			sceneObj: {},
			packageQueryObj: {
				belongPlace: '',
				trafficLimit: '',
				callDuration: '',
				screen: '筛选'
			},
			showTrafficLimit: false,
			trafficLimitList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				},
				{
					value: '150-200',
					label: '150-200'
				}
			],
			showCallDuration: false,
			callDurationList: [
				{
					value: '0-300',
					label: '0-300'
				},
				{
					value: '300-500',
					label: '300-500'
				},
				{
					value: '500-1000',
					label: '500-1000'
				}
			],
			belongingPlaceList: [],
			formClassify: {
				belonging_place: '',
				data_quota: null,
				call_duration: null,
				is_choose_number: '',
				first_recharge_amount: null,
				monthly_rent: null
			},
			showClassify: false,
			showFirstRecharge: false,
			firstRechargeList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				}
			],
			showMonthlyRent: false,
			monthlyRentList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				}
			],
			pageObj: {
				pageNow: 1,
				pageSize: 5
			},
			total: 0,
			searchImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a5cd61101_1727505869.png',
			addressIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a62b11722_1727505963.png',
						cardIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a68fde7ba_1727506063.png'
		};
	},
	onShow() {
		uni.hideHomeButton();
		this.imgPackageUrl = imageUrl;
		this.belongingPlaceList = provinceList;
		this.belongingPlaceList.forEach((item) => {
			item.value = item.code;
			item.label = item.name;
		});
	},
	onLoad(options) {
		if (options) {
			const that = this;
			const scene = decodeURIComponent(options.scene);
			if (scene !== 'undefined') {
				that.sceneNumber = scene;
				that.getMiniProgramScene();
				// that.getIpAddress()
			} else if (scene == 'undefined') {
				this.sceneObj.agent_id = options.agent_id;
				this.sceneObj.fxuser_id = options.fxuser_id;
				this.sceneObj.package_id = options.package_id;
				this.sceneObj.level = options.level;
				this.sceneObj.agent_pro_id = options.agent_pro_id;
				this.getPackageList();
			}
		}
	},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getPackageList();
		} else if (this.pageObj.pageNow == this.total) {
			uni.showToast({
				title: '到底啦',
				icon: 'none'
			});
			return;
		}
	},
	methods: {
		// 通过ip获取定位
		getIpAddress() {
			const that = this;
			uni.request({
				url: 'https://information.flow.haokazhijia.net/api/getQqIp',
				method: 'POST',
				success: (res) => {
					// this.city = res.data.result.ad_info.province + '-' + res.data.result.ad_info.city +
					// 	'-' + res.data.result.ad_info.district
					this.packageQueryObj.belongPlace = res.data.result.ad_info.province;
					that.getMiniProgramScene();
				}
			});
		},

		// 首充金额确定
		confirmFirstRecharge(e) {
			this.packageList = [];
			this.packageQueryObj.firstRechargeAmount = e[0].value;
			this.getPackageList();
		},

		// 首充金额显示下拉
		handleChooseFirstRecharge() {
			this.showFirstRecharge = true;
		},

		// 月租确定
		confirmMonthlyRent(e) {
			this.packageList = [];
			this.packageQueryObj.monthlyRent = e[0].value;
			this.getPackageList();
		},

		// 月租显示下拉
		handleChooseMonth() {
			this.showMonthlyRent = true;
		},

		// 分类弹窗-重置
		handleRefresh() {
			// this.packageQueryObj.belongPlace = ''
			// this.packageQueryObj.trafficLimit = ''
			// this.packageQueryObj.callDuration = ''
			this.packageQueryObj.firstRechargeAmount = '';
			this.packageQueryObj.monthlyRent = '';
			this.showClassify = false;
			this.getPackageList();
		},
		// 分类弹窗-确定
		handleSureClassify() {
			this.getPackageList();
			this.showClassify = false;
		},
		// 可否选号确定
		confirmChooseNumber(e) {
			this.formClassify.is_choose_number = e[0].label;
		},
		// 选择归属地
		handleBelong() {
			this.showBelongingPlace = true;
		},
		// 选择流量额度
		handleTraffic() {
			this.showTrafficLimit = true;
		},

		// 选择通话时长
		handleCallDuration() {
			this.showCallDuration = true;
		},
		// 点击分类浮动按钮
		handleClassify() {
			this.showClassify = true;
		},

		// 选择归属地确定
		confirmBelonging(e) {
			this.packageList = [];
			this.formClassify.belonging_place = e[0].label;
			this.packageQueryObj.belongPlace = e[0].label;
			this.getPackageList();
		},

		// 选择归属地取消
		cancelBelonging(e) {
			this.packageQueryObj.belongPlace = '';
			this.getPackageList();
		},

		// 选择流量额度确定
		confirmTrafficLimit(e) {
			this.packageList = [];
			this.packageQueryObj.trafficLimit = e[0].value;
			this.getPackageList();
		},

		// 选择流量额度取消
		cancelTrafficLimit(e) {
			this.packageQueryObj.trafficLimit = '';
			this.getPackageList();
		},

		// 选择通话时长确定
		confirmCallDuration(e) {
			this.packageList = [];
			this.packageQueryObj.callDuration = e[0].value;
			this.getPackageList();
		},

		// 选择通话时长取消
		cancelCallDuration(e) {
			this.packageQueryObj.callDuration = '';
			this.getPackageList();
		},

		// 查询微信小程序场景值接口
		getMiniProgramScene() {
			uni.request({
				url: 'https://saler.jkcae.com/app/getMiniProgramScene?id=' + this.sceneNumber,
				method: 'GET',
				success: (res) => {
					if (res.data.code == 1) {
						let sceneDetail = parseQueryString(res.data.data);
						// let sceneDetail = '1'
						this.sceneObj = sceneDetail;
						this.getPackageList();
					} else {
						uni.showToast({
							title: '查询失败',
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		// 获取套餐列表
		getPackageList() {
			this.$request(
				'/getAgentSmallshopPackageAllN',
				{
					agent_id: this.sceneObj.agent_id ? this.sceneObj.agent_id : '1',
					// agent_id: '103',
					operator_id: this.tabCurrent,

					belonging_place: this.packageQueryObj.belongPlace,
					data_quota_min: this.packageQueryObj.trafficLimit ? this.packageQueryObj.trafficLimit.split('-')[0] : '',
					data_quota_max: this.packageQueryObj.trafficLimit ? this.packageQueryObj.trafficLimit.split('-')[1] : '',
					call_duration_min: this.packageQueryObj.callDuration ? this.packageQueryObj.callDuration.split('-')[0] : '',
					call_duration_max: this.packageQueryObj.callDuration ? this.packageQueryObj.callDuration.split('-')[1] : '',
					// is_choose_number: this.formClassify.is_choose_number, // 可否选号
					first_recharge_amount_min: this.packageQueryObj.firstRechargeAmount ? this.packageQueryObj.firstRechargeAmount.split('-')[0] : '',
					first_recharge_amount_max: this.packageQueryObj.firstRechargeAmount ? this.packageQueryObj.firstRechargeAmount.split('-')[1] : '',
					monthly_rent_min: this.packageQueryObj.monthlyRent ? this.packageQueryObj.monthlyRent.split('-')[0] : '',
					monthly_rent_max: this.packageQueryObj.monthlyRent ? this.packageQueryObj.monthlyRent.split('-')[1] : '',

					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					let arr = [];
					res.data.forEach((item) => {
						if (item.is_upload == '1') {
							this.packageList.push(item);
						} else {
							return;
						}
					});
					this.total = res.page_info.page_count;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 切换tabbar
		handlerChange(index) {
			this.currentTabbar = index;
			// if (this.currentTabbar == 0) {
			// 	uni.setNavigationBarTitle({
			// 		title: '店铺首页'
			// 	});
			// } else {
			// 	uni.setNavigationBarTitle({
			// 		title: '订单查询'
			// 	});
			// }
		},

		// 切换tab
		changeTab(item, index) {
			this.tabCurrent = item.id;
			this.pageObj.pageNow = 1;
			this.packageList = [];
			this.getPackageList();
		},

		// 查询
		handlerQuery() {
			if (this.searchValue == '') {
				uni.showToast({
					title: '请输入收货人手机号',
					icon: 'none'
				});
				return;
			}
			// this.getOrderDetail()
			uni.navigateTo({
				// url: '/pages/queryDetail/queryDetail?number=' + encodeURIComponent(JSON.stringify(this
				// 	.searchValue))
				url: '/pages/queryOrder/queryOrder?number=' + encodeURIComponent(JSON.stringify(this.searchValue))
			});
		},

		handleShowAge(item, index) {
			if (!this.isShowAge) {
				this.isShowAge = index + 1;
			} else {
				this.isShowAge = null;
			}
		},

		// 立即办理
		handlerTransact(val, index) {
			uni.navigateTo({
				url:
					'/pages/quertDetail/quertDetail?package_id=' +
					val.id +
					'&agent_id=' +
					this.sceneObj.agent_id +
					'&fxuser_id=' +
					this.sceneObj.fxuser_id +
					'&level=' +
					this.sceneObj.level +
					'&agent_pro_id=' +
					this.sceneObj.agent_pro_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.shop_home_container {
	padding: 24rpx 32rpx 0;

	.top_img_box {
		width: 100%;

		.top_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}

	.shop_top_box {
		background: #fff;
		box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
		border-radius: 12rpx;
		padding: 31rpx 0 36rpx 26rpx;

		.top_introduce_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
			padding-bottom: 38rpx;

			.left_box {
				display: flex;
				align-items: center;

				.avatar_box {
					width: 90rpx;
					height: 90rpx;
					margin-right: 32rpx;
					box-shadow: 0px 12px 40px 17px rgba(172, 168, 168, 0.06);

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}

				.title_box {
					.top_title_box {
						display: flex;
						align-items: center;
						width: 240rpx;
						padding-bottom: 18rpx;

						.top_title {
							height: 40rpx;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding-right: 16rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.top_icon_box {
							width: 32rpx;
							height: 32rpx;
							background: linear-gradient(180deg, #89b3ff, #4c8bff);
							border-radius: 10rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ffffff;
							text-align: center;
							line-height: 32rpx;
						}
					}

					.tip_box {
						display: flex;
						align-items: center;

						.tip_icon_box {
							width: 30rpx;
							height: 30rpx;
							margin-right: 13rpx;

							.tip_icon {
								width: 100%;
								height: 100%;
							}
						}

						.tip_title_box {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #f2b032;

							.tip_line {
								width: 1px;
								height: 17rpx;
								background: #f5c976;
								margin: 0 20rpx;
							}
						}
					}
				}
			}

			.right_box {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.promotion_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 177rpx;
					height: 48rpx;
					opacity: 1;
					border-radius: 160rpx 0px 0px 160rpx;
					background: #d9e8ff;
					margin-bottom: 18rpx;

					.promotion_title {
						font-size: 22rpx;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 48rpx;
						color: #4f96ff;
						padding-right: 10rpx;
					}

					.promotion_img_box {
						width: 40rpx;
						height: 40rpx;

						.promotion_img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.sell_box {
					width: 177rpx;
					height: 45rpx;
					background: #ffeded;
					border-radius: 23rpx 0px 0px 23rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fc3838;
					text-align: center;
					line-height: 45rpx;
				}
			}
		}

		.top_options_box {
			padding: 28rpx 21rpx 35rpx 0;

			.options_title_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left_box {
					display: flex;
					align-items: center;

					.options_title {
						font-size: 34rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						padding-right: 23rpx;
					}

					.options_score {
						font-size: 46rpx;
						font-family: my-font;
						font-weight: bold;
						color: #fc3838;
					}
				}

				.right_box {
					display: flex;
					align-items: center;

					.options_star {
					}

					.option_exceed {
						font-size: 24rpx;
						font-family: my-font;
						font-weight: 400;
						color: #333333;
						padding-left: 27rpx;
					}
				}
			}

			.options_evaluate_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding: 39rpx 0;

				.options_evaluate_all {
					position: relative;

					.evaluate_img_box {
						width: 207rpx;
						height: 92rpx;

						.evaluate_img {
							width: 100%;
							height: 100%;
						}
					}

					.evaluate_high {
						position: absolute;
						top: 4rpx;
						left: 10rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fc3838;
					}

					.evaluate_data_box {
						position: absolute;
						top: 6rpx;
						left: 70rpx;

						.data_num {
							font-size: 34rpx;
							font-family: my-font;
							font-weight: bold;
							color: #4d4d4d;
							padding-bottom: 6rpx;
						}

						.data_title {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #808080;
						}
					}
				}
			}
		}

		.top_money_box {
			padding: 0 20rpx 0 0;

			.merchant_qualification_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 31rpx;

				.left_box {
					display: flex;
					align-items: center;

					.merchant_icon_box {
						width: 32rpx;
						height: 32rpx;
						margin-right: 17rpx;

						.merchant_icon {
							width: 100%;
							height: 100%;
						}
					}

					.merchant_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4d4d4d;
					}
				}

				.right_box {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}
			}

			.earnest_money_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left_box {
					display: flex;
					align-items: center;

					.earnest_icon_box {
						width: 32rpx;
						height: 32rpx;
						margin-right: 17rpx;

						.earnest_icon {
							width: 100%;
							height: 100%;
						}
					}

					.earnest_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4d4d4d;
					}
				}

				.right_box {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}
			}
		}
	}

	.shop_middle_box {
		background: #ffffff;
		border: 1px solid #f6f6f6;
		box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
		border-radius: 12rpx;
		padding-top: 28rpx;
		margin-top: 17rpx;

		.middle_title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #4c8bff;
			text-align: center;
			padding-bottom: 20rpx;
		}

		.middle_tab {
			display: flex;
			justify-content: space-around;

			.middle_all {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 32rpx;
				color: #000;

				.middle_line {
					width: 30rpx;
					height: 4rpx;
					border-radius: 30rpx;
					background: transparent;
					margin-top: 6rpx;
				}
			}

			.middle_all_active {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 32rpx;
				color: #4c8bff;

				.middle_line {
					width: 30rpx;
					height: 4rpx;
					border-radius: 30rpx;
					background: #4c8bff;
					margin-top: 6rpx;
				}
			}
		}
	}

	.package_query_box {
		display: flex;
		justify-content: space-between;
		background: #ffffff;
		box-shadow: 0px 5rpx 8rpx 1px #ececec;
		border-radius: 12rpx;
		border: 1px solid #fafafa;
		padding: 25rpx 33rpx 25rpx 28rpx;
		margin: 11rpx 0;

		.package_query_all {
			display: flex;

			.package_query_name {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				padding-right: 11rpx;
			}

			.package_query_img {
				width: 20rpx;
				height: 12rpx;

				.query_img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.home_package_box {
		position: relative;
		background: #ffffff;
		box-shadow: 0px 5rpx 8rpx 1px #ececec;
		border-radius: 12rpx;
		border: 1px solid #fafafa;
		padding: 25rpx 21rpx 18rpx 22rpx;
		margin-bottom: 12rpx;

		.home_package_all {
			.package_top_box {
				display: flex;
				justify-content: space-between;
				padding-bottom: 26rpx;

				.package_top_title {
					// width: 520rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #262626;
				}

				.package_top_check {
					width: 100rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #808080;
				}
			}

			.package_middle_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.package_middle_img_box {
					width: 212rpx;
					height: 212rpx;

					.package_middle_img {
						width: 100%;
						height: 100%;
					}
				}

				.package_middle_con_box {
					width: 409rpx;

					.package_middle_tip_box {
						display: flex;
						flex-wrap: wrap;

						.package_middle_tip_one {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 217rpx;
							height: 36rpx;
							border-radius: 6rpx;
							border: 1px solid #37b6ff;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #37b6ff;
							margin: 0 19rpx 17rpx 0;
						}

						.package_middle_tip_two {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 119rpx;
							height: 36rpx;
							border-radius: 6rpx;
							border: 1px solid #5b67ca;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #5b67ca;
						}

						.package_middle_tip_three {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 111rpx;
							height: 36rpx;
							border-radius: 6rpx;
							border: 1px solid #cc322e;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #cc322e;
							margin-right: 19rpx;
						}

						.package_middle_tip_four {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 111rpx;
							height: 36rpx;
							border-radius: 6rpx;
							border: 1px solid #438064;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #438064;
							margin-right: 19rpx;
						}

						.package_middle_tip_five {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 111rpx;
							height: 36rpx;
							border-radius: 6rpx;
							border: 1px solid #cc9f53;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #c38d23;
						}
					}

					.package_middle_introduce_all {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						padding-top: 34rpx;

						.package_middle_introduce_box {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.package_middle_introduce_num {
								font-family: Source Han Sans CN;
								font-weight: bold;
								font-size: 29rpx;
								color: #262626;
							}

							.package_middle_introduce_title {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #808080;
							}
						}

						.package_middle_introduce_line {
							width: 2rpx;
							height: 31rpx;
							background: #e61b15;
							border: 2rpx solid #e6e6e6;
						}
					}
				}
			}

			.package_bright_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 0 0;

				.package_bright_title {
					width: 446rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #4d4d4d;
				}

				.package_handle_btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 48rpx;
					background: linear-gradient(179deg, #ff6d6e, #ff1d1f);
					box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
					border-radius: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 27rpx;
					color: #ffffff;
				}
			}
		}

		.home_package_other {
			padding-top: 16rpx;
			margin-top: 26rpx;
			border-top: 1px solid #f5f5f5;

			.handle_age_box:last-child {
				padding-bottom: 0;
			}

			.handle_age_box {
				display: flex;
				padding-bottom: 17rpx;

				.age_icon_box {
					width: 26rpx;
					height: 26rpx;
					margin-right: 15rpx;

					.age_icon {
						width: 100%;
						height: 100%;
					}
				}

				.age_title {
					width: 632rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}
		}
	}

	.shop_home_query_box {
		position: relative;

		.query_img {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.query_box {
			position: absolute;
			top: 97rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;

			.query_search_box {
				display: flex;
				align-items: center;

				.search_img_box {
					width: 50rpx;
					height: 50rpx;
					margin-right: 29rpx;

					.search_img {
						width: 100%;
						height: 100%;
					}
				}

				.search_title {
					font-size: 52rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.search_input_box {
				width: 538rpx;
				height: 77rpx;
				background: #fff;
				border-radius: 38rpx;
				padding-left: 34rpx;
				margin: 77rpx 0 53rpx;
			}

			.search_btn {
				width: 538rpx;
				height: 77rpx;
				background: #4a8aff;
				box-shadow: 0px 0px 3rpx 0px #ffffff;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				line-height: 77rpx;
			}
		}
	}

	.classify_popup_box {
		// width: 700rpx;
		// background: #f6f6f6;
		padding: 40rpx 50rpx 50rpx;

		.classify_popup_title {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 34rpx;
			text-align: center;
			color: #333333;
		}

		.classify_title {
			padding: 20rpx 0;
		}

		.classify_popup_input {
			width: 594rpx;
			background: #fafafa;
			border-radius: 8rpx;
			border: 1px solid #f0f0f0;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}

		.select_box {
			width: 594rpx;
			background: #fafafa;
			border-radius: 8rpx;
			border: 1px solid #f0f0f0;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}

		.classify_btn_box {
			display: flex;
			justify-content: center;
			padding-top: 30rpx;

			.classify_reset_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 250rpx;
				height: 66rpx;
				background: #f6f6f6;
				border-radius: 32rpx 0px 0px 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #808080;
			}

			.classify_sure_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 250rpx;
				height: 66rpx;
				background: #3984fa;
				border-radius: 0px 32rpx 32rpx 0px;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}
}
</style>
